const ports = {
	groups: {
		top: {
			position: "top",
			attrs: {
				circle: {
					r: 4,
					magnet: true,
					stroke: "#5F95FF",
					strokeWidth: 1,
					fill: "#fff",
					style: {
						visibility: "hidden",
					},
				},
			},
		},
		right: {
			position: "right",
			attrs: {
				circle: {
					r: 4,
					magnet: true,
					stroke: "#5F95FF",
					strokeWidth: 1,
					fill: "#fff",
					style: {
						visibility: "hidden",
					},
				},
			},
		},
		bottom: {
			position: "bottom",
			attrs: {
				circle: {
					r: 4,
					magnet: true,
					stroke: "#5F95FF",
					strokeWidth: 1,
					fill: "#fff",
					style: {
						visibility: "hidden",
					},
				},
			},
		},
		left: {
			position: "left",
			attrs: {
				circle: {
					r: 4,
					magnet: true,
					stroke: "#5F95FF",
					strokeWidth: 1,
					fill: "#fff",
					style: {
						visibility: "hidden",
					},
				},
			},
		},
	},
	items: [
		{
			group: "top",
		},
		{
			group: "right",
		},
		{
			group: "bottom",
		},
		{
			group: "left",
		},
	],
};

export const stencilNode = [
	// custom-rect
	[
		"custom-rect",
		{
			inherit: "rect", // 集成的类
			width: 66,
			height: 36,
			attrs: {
				body: {
					strokeWidth: 1,
					stroke: "#5F95FF",
					fill: "#EFF4FF",
				},
				text: {
					fontSize: 12,
					fill: "#262626",
				},
			},
			ports: { ...ports },
		},
		true,
	],
	// custom-polygon
	[
		"custom-polygon",
		{
			inherit: "polygon",
			width: 66,
			height: 36,
			attrs: {
				body: {
					strokeWidth: 5,
					stroke: "#5F95FF",
					fill: "deeppink",
				},
				text: {
					fontSize: 12,
					fill: "blue",
				},
			},
			ports: {
				...ports,
				items: [
					{
						group: "top",
					},
					{
						group: "bottom",
					},
				],
			},
		},
		true,
	],
	// custom-circle
	[
		"custom-circle",
		{
			inherit: "circle",
			width: 45,
			height: 45,
			attrs: {
				body: {
					strokeWidth: 1,
					stroke: "#5F95FF",
					fill: "#EFF4FF",
				},
				text: {
					fontSize: 12,
					fill: "#262626",
				},
			},
			ports: { ...ports },
		},
		true,
	],
	// custom-image
	[
		"custom-image",
		{
			inherit: "rect",
			width: 52,
			height: 52,
			markup: [
				{
					tagName: "rect",
					selector: "body",
				},
				{
					tagName: "image",
				},
				{
					tagName: "text",
					selector: "label",
				},
			],
			attrs: {
				body: {
					stroke: "#5F95FF",
					fill: "#5F95FF",
				},
				image: {
					width: 26,
					height: 26,
					refX: 13,
					refY: 16,
				},
				label: {
					refX: 3,
					refY: 2,
					textAnchor: "left",
					textVerticalAnchor: "top",
					fontSize: 12,
					fill: "#fff",
				},
			},
			ports: { ...ports },
		},
		true,
	],
	// custom-image
	[
		"custom-path",
		{
			inherit: "path",
			width: 10,
			height: 52,
			ports: { ...ports },
		},
		true,
	],
];
